<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代理模式</title>
    <style>
        dt {
            font-size: 18px;
        }

        dd {
            font-size: 16px;
            color: cornflowerblue;
            font-weight: bold;
        }

        pre {
            background: #e9ecef;
            color: #000;
            padding: 20px;
        }
    </style>
</head>

<body>
    <dl>
        <dt>代理模式的定义:</dt>
        <dd>为一个对象提供一个代用品或占位符，以便控制对它的访问。</dd>
    </dl>
    <dl>
        <dt>适用场景：</dt>
        <dd><em>常用的虚拟代理形式：</em>某一个花销很大的操作，可以通过虚拟代理的方式延迟到这种需要它的时候才去创建（例：使用虚拟代理实现图片懒加载）</dd>
        <dd><em>图片懒加载的方式：</em>先通过一张loading图占位，然后通过异步的方式加载图片，等图片加载好了再把完成的图片加载到img标签里面。</dd>
    </dl>

    <pre>
        <code>
            var imgFunc = (function () {
                var imgNode = document.createElement('img');
                document.body.appendChild(imgNode);
                return {
                    setSrc: function (src) {
                        imgNode.src = src;
                    }
                }
            })();
            var proxyImage = (function () {
                var img = new Image();
                img.onload = function () {
                    imgFunc.setSrc(this.src);
                }
                return {
                    setSrc: function (src) {
                        imgFunc.setSrc('./loading,gif');
                        img.src = src;
                    }
                }
            })();
            proxyImage.setSrc('./pic.png');
        </code>
    </pre>
    <script>
        var imgFunc = (function () {
            var imgNode = document.createElement('img');
            document.body.appendChild(imgNode);
            return {
                setSrc: function (src) {
                    imgNode.src = src;
                }
            }
        })();
        var proxyImage = (function () {
            var img = new Image();
            img.onload = function () {
                imgFunc.setSrc(this.src);
            }
            return {
                setSrc: function (src) {
                    imgFunc.setSrc('./loading,gif');
                    img.src = src;
                }
            }
        })();
        proxyImage.setSrc('https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1939091987.jpg');
    </script>
</body>

</html>